<template>
  <div class="content" v-if="orderPre.id">
    <!-- Navbar -->
    <navBar title="药品支付" class="navbar"></navBar>
    <!-- 地址 -->
    <div class="address" v-if="orderAddressList.length !== 0">
      <div class="city">
        <van-icon name="location" color="#ff7702" />{{
          orderAddressList[0].province
        }}{{ orderAddressList[0].city }}{{ orderAddressList[0].county }}
      </div>
      <div class="detail">{{ orderAddressList[0].addressDetail }}</div>
      <div class="info">
        {{ orderAddressList[0].receiver }}
        {{ filterMobile(orderAddressList[0].mobile) }}
      </div>
    </div>
    <!-- 药品信息 -->
    <div class="drug_info">
      <div class="head">
        <div>优质药房</div>
        <div class="title">优医质保 假一赔十</div>
      </div>
      <div class="item" v-for="item in orderPre.medicines" :key="item.id">
        <div class="info">
          <img class="img" :src="item.avatar" alt="" />
          <div class="right">
            <div class="name">
              <div>{{ item.name }}</div>
              <div>×{{ item.quantity }}</div>
            </div>
            <div class="attr">
              <van-tag class="tag" color="#16c2a3" v-if="item.prescriptionFlag"
                >处方药</van-tag
              >
              {{ item.specs }}
            </div>
            <div class="price">￥{{ item.amount }}</div>
          </div>
        </div>
        <p class="desc">
          {{ item.usageDosag }}
        </p>
      </div>
    </div>
    <!-- 药品金额 -->
    <van-cell-group>
      <van-cell title="药品金额" :value="`￥${orderPre.payment}`" />
      <van-cell title="运费" :value="`￥${orderPre.expressFee}`" />
      <van-cell title="优惠券" :value="`-￥${orderPre.couponDeduction}`" />
      <van-cell
        title="实付款"
        :value="`￥${orderPre.actualPayment}`"
        value-class="actual_payment"
      />
    </van-cell-group>
    <!-- 底部备注 支付协议 -->
    <div class="footer">
      <p class="remark">
        <span style="color: #eb5757">* </span
        >由于药品的特殊性，如非错发、漏发药品的情况，药品一经发出不得退换，请核对药品信息无误后下单。
      </p>
      <van-checkbox
        v-model="checked"
        checked-color="#16c2a3"
        icon-size="0.37rem"
      >
        <template #default>
          <div class="agreement">
            我已同意<span style="color: #16c2a3">支付协议</span>
          </div>
        </template>
      </van-checkbox>
    </div>
    <!-- 支付 -->
    <van-submit-bar
      class="payment"
      :price="orderPre.actualPayment * 100"
      button-text="立即支付"
      button-color="#16c2a3"
      text-align="left"
      :loading="isLoading"
      @submit="onPayment"
    />

    <!-- 支付弹出层 -->
    <PayPopup
      v-model="isShow"
      :orderId="orderId"
      payCallback="https://cp.itheima.net/order/pay/result"
      isOrderDetail="1"
      :actualPayment="orderPre.actualPayment"
    ></PayPopup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getOrderAddress, getOrderPre, medicineOrder } from '@/api'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()

// 查询收货地址列表
const orderAddressList = ref([])
const getOrderAddressList = async () => {
  const { data } = await getOrderAddress()
  orderAddressList.value = data
}
getOrderAddressList()

// 支付药款页面-根据处方信息计算药款
const orderPre = ref({})
const fetchOrderPre = async () => {
  const { data } = await getOrderPre({
    prescriptionId: route.query.id
  })
  orderPre.value = data
}
fetchOrderPre()

// 支付协议
const checked = ref(false)

// 支付弹出层显示隐藏
const isShow = ref(false)

// 立即支付
const orderId = ref('')
const isLoading = ref(false)
const onPayment = async () => {
  if (!checked.value) {
    showToast('请同意支付协议')
    return
  }
  isLoading.value = true
  const { data } = await medicineOrder({
    id: route.query.id,
    addressId: orderAddressList.value[0].id
  })
  orderId.value = data.id
  isLoading.value = false
  isShow.value = true
}

// 过滤手机号隐藏
const filterMobile = (mobile) => {
  return mobile.substring(0, 3) + '****' + mobile.substring(7)
}
</script>

<style lang="scss" scoped>
// Navbar
::v-deep .navbar {
  background-color: #16c2a3;
  .van-nav-bar__content {
    .van-nav-bar__left {
      .van-icon-arrow-left {
        font-size: 36px;
        color: #fff;
      }
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
}

// 地址
.address {
  margin-top: 90px;
  padding: 30px;
  background-color: #fff;
  font-size: 26px;
  line-height: 1.7;
  .detail {
    font-size: 34px;
  }
}

// 药品信息
.drug_info {
  padding: 0 30px;
  margin-top: 26px;
  background-color: #fff;
  .head {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    font-size: 32px;
    .title {
      margin-left: 20px;
      font-size: 26px;
      color: #848484;
    }
  }
  .item {
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    font-size: 32px;
    &:last-child {
      border-bottom: 0;
    }
    .info {
      display: flex;
      margin-bottom: 10px;
      width: 100%;
      .img {
        margin-right: 30px;
        width: 160px;
      }
      .right {
        flex: 1;
        .name {
          display: flex;
          justify-content: space-between;
          font-size: 31px;
        }
        .attr {
          margin: 8px 0;
          font-size: 28px;
          color: #848484;
          .tag {
            padding: 2px 8px;
            margin-right: 10px;
            font-size: 25px;
          }
        }
        .price {
          color: #eb5757;
        }
      }
    }
    .desc {
      padding: 10px 20px;
      background-color: #f6f7f9;
      font-size: 28px;
      color: #c3c3c5;
    }
  }
}

// 药品金额
::v-deep .van-cell {
  font-size: 32px;
  .actual_payment {
    font-size: 36px;
    color: #eb5757;
  }
}

// 底部备注 支付协议
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 30px;
  margin-bottom: 110px;
  background-color: #fff;
  .remark {
    margin-bottom: 50px;
    font-size: 25px;
    color: #848484;
  }
  .agreement {
    font-size: 28px;
  }
}

// 支付
::v-deep .payment {
  border-top: 1px solid #eee;
  .van-button {
    width: 400px;
    font-size: 32px;
  }
}
</style>
